<template>
  <div class="n">
    <div class="n1">
      <img
        src="https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC85YTZhMTc4ZGMyNjAyNTRkZWIwZGQxYzlmODFiOGMzZS05MC53ZWJw.webp"
      />
    </div>

    <div class="n2">
      <a href="#/" :class="$route.path=='/'?'co':''">首页</a>
      <a href="#/no2" :class="$route.path=='/no2'?'co':''">热门景点</a>
      <a href="#/no3" :class="$route.path=='/no3'?'co':''">旅游套餐</a>
      <a href="#/no4" :class="$route.path=='/no4'?'co':''">关于我们</a>
      <a href="#/no5" :class="$route.path=='/no5'?'co':''">客户反馈</a>
      <a href="#/no6" :class="$route.path=='/no6'?'co':''">联系我们</a>
      <a href="#/no7" :class="$route.path=='/no7'?'co':''">旅游签证</a>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.n {
  padding: 0 100px;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.n > .n1 {
  height: 60px;
  float: left;
}
.n > .n1 > img {
  height: 100%;
}
.n>.n2{
	text-align: center;
}
.n>.n2 > a {
  text-align: center;
  display: inline-block;
  color: #fff;
  padding: 0 15px;
  line-height: 60px; 
}

.co{
  /* transition: .8s;
  transform:scaleX(1.5); */
	border-bottom: 1px solid #ccc;
}
</style>